<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="400" height="100" style="border:1px solid gray"></canvas>
	<canvas id="mycanvas2" width="400" height="100" style="border:1px solid #000000"></canvas>
	<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
	<canvas id="myCanvas3-you" width="400" height="100" style="border:1px solid #c3c3c3;"></canvas>
	<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
	<canvas id="myCanvas5" width="244" height="182" style="border:1px solid #d3d3d3;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	context.beginPath();
	context.rect(20,20,100,50);
	context.stroke();
// fillStyle前两个位置决定起点坐标，随后设置宽高
	context.beginPath();
	context.fillStyle="#ff0000";
	context.fillRect(140,20,100,50);
	context.stroke()
</script>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas2");
	var context = canvas.getContext("2d");
	context.beginPath();
	context.lineWidth = "5"
	context.moveTo(0,0);
	context.lineTo(400,100);
	context.stroke()
</script>

<script type="text/javascript">
	var c=document.getElementById("myCanvas3");
	var cxt=c.getContext("2d");
	cxt.fillStyle="#FF0000";
	cxt.beginPath();
	cxt.arc(70,18,15,0,Math.PI*2,true);
	cxt.closePath();
	cxt.fill();
</script>

<script type="text/javascript">
	var c=document.getElementById("myCanvas4");
	var cxt=c.getContext("2d");
	var grd=cxt.createLinearGradient(0,0,175,50);
	grd.addColorStop(0,"#FF0000");
	grd.addColorStop(1,"#00FF00");
	cxt.fillStyle=grd;
	cxt.fillRect(0,0,175,50);
</script>

<script type="text/javascript">
	var canvas = document.getElementById("myCanvas3-you");
	var context = canvas.getContext("2d");
	context.beginPath();
	context.lineWidth = "10";
	context.lineCap = "round";
	context.moveTo(20,20)
	context.lineTo(200,20)
	context.stroke()

	context.beginPath()
	context.lineWidth="20"
	context.lineCap = "square"
	context.moveTo(20,40)
	context.lineTo(200,40)
	context.stroke()

	context.beginPath()
	context.lineWidth="15"
	context.lineCap = "butt"
	context.moveTo(20,80)
	context.lineTo(200,80)
	context.stroke()
</script>

<script>
	window.onload = function() {
	    var canvas = document.getElementById("myCanvas5");
	    var context = canvas.getContext("2d");
	    var img = document.getElementById("scream");
	    
	    img.onload = function{
	    	context.drawImage(img, 10, 10);
	    }
	};
</script>